<template>
  <svg v-if="isLocal" :class="className" :viewBox="oSvg.default.viewBox">
    <use :xlink:href="'#' + oSvg.default.id" />
  </svg>
  <svg v-else :class="className">
    <use :xlink:href="oSvg" />
  </svg>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
/**
 * @title svg-sprite-loader[SVG精靈加載器]
 * @description svg sprite则是通过symbol和use来实现的。
 * @description svg>symbol插入到body标签里。同时也支持外链(IE不支持)，但要注意同源问题。
 *
 * @description 仅插入引用过的svg,不会全量插入
 */
/*
<svg class="s16 clear-icon js-clear-input">
  <use
    xlink:href="/assets/icons-c181.svg#close"
  />
</svg>
外链：http://39.100.75.16/ + /assets/icons-c181.svg#close
*/
export default defineComponent({
  name: "tv-svg",
  props: {
    path: { type: String, required: true },
    className: {
      // 'h-6 w-6'
      type: String,
      default: "",
    },
    isLocal: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const oSvg = computed(() => {
      if (props.isLocal) {
        // 加载本地单个svg,在通过plugin合并插入dom
        return require(`../assets/svg/${props.path}.svg`);
      } else {
        // 外链svg(保持同源)
        return window.location.origin + "/sprite.svg#" + props.path;
        /*
          if (
            /Android|webOS|iPhone|iPod|BlackBerry|iPad/i.test(window.navigator.userAgent)
          ) {
            return "http://192.168.20.127:10023/sprite.svg#" + props.path;
          } else {
            return window.location.origin + "/sprite.svg#" + props.path;
          }
        */
      }
    });
    return { oSvg };
  },
});
</script>

<style></style>
